<template>
	<view>
		<uni-table border stripe emptyText="暂无更多数据" >
			<!-- 表头行 -->
			<uni-tr>
				<uni-th align="center">商品名称</uni-th>
				<uni-th align="center">商品描述</uni-th>
				<uni-th align="left">商品单价</uni-th>
				<uni-th align="left">商品数量</uni-th>
				<uni-th align="left">小计</uni-th>
			</uni-tr>
			<!-- 表格数据行 -->
			<uni-tr v-for="(v,i) in carData">
				<uni-td>{{v.name}}</uni-td>
				<uni-td>{{v.msg}}</uni-td>
				<uni-td>{{v.price}}</uni-td>
				<uni-td><button size="mini" @click="jian(i)">-</button>{{v.num}}<button size="mini" @click='jia(i)'>+</button></uni-td>
				<uni-td>{{v.price*v.num}}</uni-td>
			</uni-tr>	
		</uni-table>
		<view>合计：{{sum}}</view>
		<input type="text" v-model="val">
		<view>{{y}}-{{m | toDub}}-{{d | toDub}}</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				y:2024,
				m:1,
				d:5,
				val:'',
				sum:0,
				carData:[
					{'name':'衣服',price:100,num:1,msg:"这是一个衣服"},
					{'name':'裤子',price:200,num:2,msg:"这是一个裤子"},
					{'name':'袜子',price:50,num:10,msg:"这是一个袜子"},
					{'name':'鞋子',price:300,num:1,msg:"这是一个鞋子"},
					{'name':'裙子',price:400,num:1,msg:"这是一个裙子"}
				]
			}
		},
		filters:{
			toDub:function(v){
				if(v<10){
					return '0'+v
				}else{
					return v
				}
			}
		},
		methods: {
			jian(index){
				if(this.carData[index].num>1){
					this.carData[index].num--;
				}
				
			},
			jia(index){
				this.carData[index].num++;
			}
		},
		/* computed:{
			sum:function(){
				let _sum=0;
				for(let i=0;i<this.carData.length;i++){
					_sum+=this.carData[i].price*this.carData[i].num
				}
				return _sum
			}
		}, */
		watch:{
			val:function(){
				console.log('val变化了')
			},
			carData:{
				handler:function(){
					let _sum=0;
					for(let i=0;i<this.carData.length;i++){
						_sum+=this.carData[i].price*this.carData[i].num
					}
					this.sum=_sum;
				},
				deep:true,
				immediate:true
			}
		}
	}
</script>

<style>

</style>
